<template>
  <div class="container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 面包屑导航 -->
        <el-breadcrumb
          v-if="$route.query.id"
          separator-class="el-icon-arrow-right"
          class="mybread"
        >
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{ $route.query.name }}</el-breadcrumb-item>
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-form ref="searchRef" :model="queryInfo">
          目录名称
          <el-input
            class="searchInput"
            v-model.trim="queryInfo.directoryName"
            style="width: 200px;"
          ></el-input
          >状态:
          <el-select v-model="queryInfo.state">
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
          <el-button size="small" class="removeBtn" @click="clearForm"
            >清除</el-button
          >
          <el-button type="primary" size="small" @click="onSubmit"
            >搜索</el-button
          >
          <!-- 新增目录 -->
          <el-button
            class="fr"
            type="success"
            size="small"
            icon="el-icon-edit"
            @click="showAddDialog.show = true"
            >新增目录</el-button
          >
          <el-button
            v-if="$route.query.id"
            type="text"
            icon="el-icon-back"
            class="fr"
            @click="$router.push('subjects')"
            >返回学科</el-button
          >
        </el-form>
        <!-- 提示信息 -->
        <el-alert
          class="DataAlert"
          :title="alertText"
          type="info"
          :closable="false"
        ></el-alert>
        <!-- 表格 -->
        <el-table :data="directorysList" style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="70"
          ></el-table-column>
          <el-table-column
            prop="subjectName"
            label="所属学科"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="directoryName"
            label="目录名称"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="username"
            label="创建者"
            align="center"
            width="150px"
          ></el-table-column>
          <el-table-column label="创建日期" align="center" width="300px">
            <template slot-scope="scope">
              <span>
                {{
                  scope.row.addDate
                    | parseTimeByString('{y}-{m}-{d} {h}:{i}:{s}')
                }}
              </span>
            </template>
          </el-table-column>
          <!-- 面试题数量 -->
          <el-table-column
            width="200px"
            align="center"
            prop="totals"
            label="面试题数量  "
          ></el-table-column>
          <el-table-column label="状态" width="150px" align="center">
            <template slot-scope="scope">
              <span :class="{ red: !scope.row.state }">{{
                scope.row.state === 1 ? '已启用' : '已禁用'
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="280px" align="center">
            <template slot-scope="scope">
              <!-- 修改 -->
              <el-button
                size="small"
                type="text"
                :disabled="!scope.row.state"
                @click="
                  showEditDialog(
                    scope.row.subjectID,
                    scope.row.directoryName,
                    scope.row.id
                  )
                "
                >修改</el-button
              >
              <!-- 状态 -->
              <el-button
                size="small"
                type="text"
                :class="{ red: scope.row.state }"
                @click="changeState(scope.row)"
              >
                {{ scope.row.state === 1 ? '禁用' : '启用' }}
              </el-button>
              <!-- 删除 -->
              <el-button
                :disabled="!scope.row.state"
                size="small"
                type="text"
                @click="delTag(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
          <my-pagenation
            @sizeChange="handleSizeChange"
            @pageChange="handleCurrentChange"
            :total="total"
            :currentpage="queryInfo.page"
            :pagesize="queryInfo.pagesize"
            :pagesizes="pageSizes"
          ></my-pagenation>
        </div>
      </el-card>
      <!-- 修改标签对话框 -->
      <el-dialog title="修改目录" :visible.sync="isEditShow" width="30%">
        <el-form
          :model="editForm"
          :rules="directoryNameRules"
          ref="editFormRef"
        >
          <el-form-item label="目录名称:" prop="directoryName">
            <el-input
              style="width: 420px;"
              v-model="editForm.directoryName"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="isEditShow = false">取 消</el-button>
          <el-button type="primary" @click="onEditFrom">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 新增目录(已封装) -->
      <directorys-add
        :showAddDialogSon="showAddDialog"
        :idFromSubject="idFromSubject"
        @cancelDialog="cancelDialog"
        @loadList="getList()"
      ></directorys-add>
    </div>
  </div>
</template>

<script>
import {
  list,
  editDirectorys,
  changedirectoryState,
  removeDirectory,
  getSubjectList
} from '@/api/hmmm/directorys'
import mypagenation from '../components/mypagenation'
import directorysAdd from '../components/directorys-add.vue'
export default {
  components: {
    'my-pagenation': mypagenation,
    'directorys-add': directorysAdd
  },
  data() {
    return {
      alertText: '',
      directorysList: [],
      // 学科列表
      // subjectsList: [],
      queryInfo: {
        page: 1,
        pagesize: 4,
        directoryName: '',
        state: null,
        subjectID: this.$route.query.id
      },
      total: 0,
      pageSizes: [4, 6, 8, 10],
      // 修改的对话框
      isEditShow: false,
      // 新增的对话框
      showAddDialog: {
        show: false
      },
      editForm: {
        id: '',
        subjectID: '',
        directoryName: ''
      },
      idFromSubject: this.$route.query.id,
      // addForm: {
      //   subjectID: this.$route.query.id,
      //   tagName: ""
      // },
      directoryNameRules: {
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getList()
  },

  methods: {
    async getList() {
      try {
        const res = await list(this.queryInfo)
        this.directorysList = res.data.items
        this.alertText = `数据一共${res.data.counts}条`
        this.total = res.data.counts
      } catch (error) {
        this.$message.error('数据获取失败')
      }
    },
    // 清除按钮
    clearForm() {
      this.queryInfo.directoryName = ''
      this.queryInfo.state = null
      this.getList(this.queryInfo)
    },
    onSubmit() {
      this.getList(this.queryInfo)
      // 只有点击搜索页码回到第一页
      this.queryInfo.page = 1
    },
    // 每页显示信息条数
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getList()
    },
    // 进入某一页
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage
      this.getList(this.queryInfo)
    },
    // 回显并且组装修改的参数对象
    showEditDialog(Sid, dName, dataID) {
      this.isEditShow = true
      this.editForm.subjectID = Sid
      this.editForm.directoryName = dName
      this.editForm.id = dataID
    },
    // 修改标签
    onEditFrom() {
      this.$refs.editFormRef.validate(async valid => {
        if (valid) {
          try {
            await editDirectorys(this.editForm)
            this.isEditShow = false
            this.getList()
            this.$message.success('修改成功')
          } catch (error) {
            this.$message.error('修改失败')
          }
        } else {
          return false
        }
      })
    },
    // 删除目录
    delTag(delID) {
      this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const objDel = { id: delID }
          await removeDirectory(objDel)
          this.getList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 标签状态
    async changeState(tag) {
      try {
        const s = tag.state === 1 ? 0 : 1
        const res = await changedirectoryState({
          id: tag.id,
          state: s
        })
        tag.state === 0 ? (tag.state = 1) : (tag.state = 0)
        this.$message.success('修改状态成功')
      } catch (error) {
        this.$message.error('修改失败!')
      }
    },
    cancelDialog(val) {
      this.showAddDialog.show = val
    }
  }
}
</script>

<style scoped lang="scss">
.searchInput {
  margin-left: 10px;
  margin-right: 80px;
}
.removeBtn {
  margin-left: 10px;
}
.fr {
  float: right;
}
.DataAlert {
  margin: 20px 0;
}
.pagination {
  margin: 40px 0;
  // text-align: right;
}
.red {
  color: red;
}
.mybread {
  padding-bottom: 15px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
}
</style>
